<!--
 @description 结果查询
 @fileName Result.vue
 @author zengqiongying
 @created 2022/02/26 15:25:05
-->
<template>
  <div class="search-result-pane">
    <div class="search-nav-list">
      <div
        v-for="(l,i) in navList"
        :key="i"
        :class="['nav-item', {active:l.value === activeNav}]"
        @click.stop="clickSelectedHandle(l)"
      >{{ l.label }}</div>
    </div>
    <div class="search-result-list">
      <List
        ref="list"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
      >
        <Item v-for="(g,i) in list" :key="i" :g="g" @click.native.stop="handleClick(g)" />
      </List>
    </div>
  </div>
</template>

<script>
import { getContentList } from '@/apis/helpCenter'
import List from '../components/List'
import Item from '../components/ListItem'
export default {
  name: 'HelpSearchResult',
  refresh: true,
  components: { List, Item },
  props: {
    searchValue: {
      type: String,
      default: ''
    },
    defineSearch: {
      // 是否自定义查询
      type: Boolean,
      default: false
    },
    defineRangeIds: {
      // 自定义查询范围ID集合
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeNav: 'lastUpdateTime',
      navList: [
        { label: '最近更新', value: 'lastUpdateTime' },
        { label: '点赞量', value: 'likeNum' },
        { label: '浏览量', value: 'readNum' }
      ],
      list: [],
      finished: false
    }
  },
  watch: {
    categoryId(val, oldVal) {
      this.resetPageData()
    }
  },
  created() {
    this.$on('refresh', this.resetPageData)
  },

  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    async load(page, rows) {
      const params = {
        page,
        rows,
        sort: this.activeNav,
        title: this.searchValue
      }
      if (this.defineSearch) {
        if (this.defineRangeIds.length) {
          params.contentIds = this.defineRangeIds.join(',')
        } else {
          this.finished = true
          return
        }
      }
      return getContentList(params).then(res => {
        const data = res.data
        this.list.push(...data.records)
        if (data.total <= this.list.length) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    clickSelectedHandle(l) {
      this.activeNav = l.value
      this.$nextTick(() => {
        this.resetPageData()
      })
    },
    handleClick(g) {
      const query = {
        name: this.searchValue, s: this.activeNav
      }
      if (this.defineSearch) {
        query.hide = 1
      }
      this.$router.push({ name: 'HelpCenterDetail', params: { id: g.id }, query })
    }
  }
}

</script>
<style lang='less' scoped>
.search-result-pane{
  position: relative;
  padding-top:44px;
  .search-nav-list{
    position: fixed;
    z-index: 99;
    left: 0;
    top: 44PX;
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(115, 115, 115, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .nav-item{
      padding:0 10px;
      line-height: 44px;
      color: #333;
      font-size: 14px;
      letter-spacing: 1px;
      &.active{
        color: #00C8B4;
      }
    }
  }
}
</style>
